<!DOCTYPE html>
<html lang="en">
<head>
<title>gallery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">


<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" media="screen">    
<link rel="stylesheet" href="styles.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/touchTouch.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/isotope.css" type="text/css" media="screen">

<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>

<script type="text/javascript" src="js/jquery.ui.totop.js"></script>

<script type="text/javascript" src="js/touchTouch.jquery.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script>
$(document).ready(function() {
	// 


}); //
$(window).load(function() {
	// isotop
	var $container = $('#isotope-items'),
		$optionSet = $('#isotope-options'), 
	    $optionSets = $('#isotope-filters'), 
	    $optionLinks = $optionSets.find('a'); 
    $container.isotope({ 
        filter: '*',
        layoutMode: 'fitRows'
    });  
   	$optionLinks.click(function(){ 
   		var $this = $(this); 
    	// don't proceed if already selected 
		if ( $this.hasClass('selected') ) { 
			return false; 
		}    		
   		$optionSet.find('.selected').removeClass('selected'); 
   		$this.addClass('selected');

        var selector = $(this).attr('data-filter'); 
        $container.isotope({ 
            filter: selector            
        }); 
      	return false; 
    });    	
	$(window).on("resize", function( event ) {	
		$container.isotope('reLayout');		
	});		

	// touchTouch
	$('.thumb-isotope .thumbnail a').touchTouch();

}); //
</script>		
<!--[if lt IE 8]>
		<div style='text-align:center'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg"border="0"alt=""/></a></div>  
	<![endif]-->    

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>      
  <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
</head>

<body class="subpage">
<div id="main">

<header>
<!-- <div class="top1">
<div class="container">
<div class="row">
<div class="span12">
<div class="top1_inner clearfix">
	<div class="logo_wrapper"><a href="index.html" class="logo">ShipLCOM 2.0 LOADING INSTRUMENT</a></div>
	<div class="search-form-wrapper clearfix">
		<form id="search-form" action="#" method="GET" accept-charset="utf-8" class="navbar-form" >
			<input type="text" name="s" value='Search' onBlur="if(this.value=='') this.value='Search'" onFocus="if(this.value =='Search' ) this.value=''">
			<a href="#" onClick="document.getElementById('search-form').submit()"></a>
		</form>	
	</div>
	
</div>	
</div>	
</div>	
</div>
</div> -->	
<div class="top2">
<div class="menu_wrapper">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar_">
	<div class="navbar-inner navbar-inner_">
		<a class="btn btn-navbar btn-navbar_" data-toggle="collapse" data-target=".nav-collapse_">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>		</a>
		<div class="nav-collapse nav-collapse_ collapse">
			<ul class="nav sf-menu clearfix">
				<li><a href="index.html">Home</a></li>
				<!-- <li><a href="services.html">Services</a></li> -->
				<li><a href="events.html">Events</a></li>
				<li class="active sub-menu sub-menu-1"><a href="gallery.html">Gallery</a></li>				
				<li><a href="resources.html">Resources</a></li>
				<li><a href="contact.html">Contacts</a></li>											
    		</ul>
		</div>
	</div>
</div>	
</div>	
</div>	
</div>	
</div>

</div>
</header>	

<div id="content">
<div class="container">
<div class="row">		
	<div class="span12">
		<h1>Our Gallery</h1>

		<div id="isotope-options">
            <ul id="isotope-filters" class="clearfix">
                <li><a href="#" class="selected" data-filter="*">Show All</a></li> 
	            <li><a href="#" data-filter=".isotope-filter1">Category 1</a></li> 
	            <li><a href="#" data-filter=".isotope-filter2">Category 2</a></li> 
	            <li><a href="#" data-filter=".isotope-filter3">Category 3</a></li> 	             
            </ul>            
        </div>

        <ul class="thumbnails" id="isotope-items">		  
            <li class="span4 isotope-element isotope-filter1">
				<div class="thumb-isotope">
					<div class="thumbnail clearfix">
						<a href="images/gallery01_big.jpg">
							<figure>
								<img src="images/gallery01.jpg" alt=""><em></em>
							</figure>
						</a>
						<div class="caption">
							<p>
								Lorem ipsum dolor sit amet conse ctetur adipisicin el Mauris vel dui facilisis lacus 
							</p>
						</div>
					</div>
				</div>
            </li>
            <li class="span4 isotope-element isotope-filter2">
				<div class="thumb-isotope">
					<div class="thumbnail clearfix">
						<a href="images/gallery02_big.jpg">
							<figure>
								<img src="images/gallery02.jpg" alt=""><em></em>
							</figure>
						</a>
						<div class="caption">
							<p>
								Lorem ipsum dolor sit amet conse ctetur adipisicin el Mauris vel dui facilisis lacus 
							</p>
						</div>
					</div>
				</div>
            </li>
            <li class="span4 isotope-element isotope-filter3">
				<div class="thumb-isotope">
					<div class="thumbnail clearfix">
						<a href="images/gallery03_big.jpg">
							<figure>
								<img src="images/gallery03.jpg" alt=""><em></em>
							</figure>
						</a>
						<div class="caption">
							<p>
								Lorem ipsum dolor sit amet conse ctetur adipisicin el Mauris vel dui facilisis lacus 
							</p>
						</div>
					</div>
				</div>
            </li>
            <li class="span4 isotope-element isotope-filter1">
				<div class="thumb-isotope">
					<div class="thumbnail clearfix">
						<a href="images/gallery04_big.jpg">
							<figure>
								<img src="images/gallery04.jpg" alt=""><em></em>
							</figure>
						</a>
						<div class="caption">
							<p>
								Lorem ipsum dolor sit amet conse ctetur adipisicin el Mauris vel dui facilisis lacus 
							</p>
						</div>
					</div>
				</div>
            </li>
            <li class="span4 isotope-element isotope-filter2">
				<div class="thumb-isotope">
					<div class="thumbnail clearfix">
						<a href="images/gallery05_big.jpg">
							<figure>
								<img src="images/gallery05.jpg" alt=""><em></em>
							</figure>
						</a>
						<div class="caption">
							<p>
								Lorem ipsum dolor sit amet conse ctetur adipisicin el Mauris vel dui facilisis lacus 
							</p>
						</div>
					</div>
				</div>
            </li>
            <li class="span4 isotope-element isotope-filter3">
				<div class="thumb-isotope">
					<div class="thumbnail clearfix">
						<a href="images/gallery06_big.jpg">
							<figure>
								<img src="images/gallery06.jpg" alt=""><em></em>
							</figure>
						</a>
						<div class="caption">
							<p>
								Lorem ipsum dolor sit amet conse ctetur adipisicin el Mauris vel dui facilisis lacus 
							</p>
						</div>
					</div>
				</div>
            </li>
            <li class="span4 isotope-element isotope-filter1">
				<div class="thumb-isotope">
					<div class="thumbnail clearfix">
						<a href="images/gallery07_big.jpg">
							<figure>
								<img src="images/gallery07.jpg" alt=""><em></em>
							</figure>
						</a>
						<div class="caption">
							<p>
								Lorem ipsum dolor sit amet conse ctetur adipisicin el Mauris vel dui facilisis lacus 
							</p>
						</div>
					</div>
				</div>
            </li>
            <li class="span4 isotope-element isotope-filter3">
				<div class="thumb-isotope">
					<div class="thumbnail clearfix">
						<a href="images/gallery08_big.jpg">
							<figure>
								<img src="images/gallery08.jpg" alt=""><em></em>
							</figure>
						</a>
						<div class="caption">
							<p>
								Lorem ipsum dolor sit amet conse ctetur adipisicin el Mauris vel dui facilisis lacus 
							</p>
						</div>
					</div>
				</div>
            </li>
            <li class="span4 isotope-element isotope-filter3">
				<div class="thumb-isotope">
					<div class="thumbnail clearfix">
						<a href="images/gallery09_big.jpg">
							<figure>
								<img src="images/gallery09.jpg" alt=""><em></em>
							</figure>
						</a>
						<div class="caption">
							<p>
								Lorem ipsum dolor sit amet conse ctetur adipisicin el Mauris vel dui facilisis lacus 
							</p>
						</div>
					</div>
				</div>
            </li>
        </ul>

   </div>
</div>	
</div>
</div>

<footer>
<div class="bot1">
<div class="container">
<div class="row">
<div class="span3">

	<div class="block_title">Archives</div>

	<ul class="ul0">
	  <li><a href="#">May 2014</a></li>
	  <li><a href="#">April 2014</a></li>
	  <li><a href="#">March 2014</a></li>
	  <li><a href="#">February 2014</a></li>
	  <li><a href="#">January 2014</a></li>	                                                                                
	</ul>

</div>	
<div class="span3">

	<div class="block_title">Recent News</div>

	<ul class="ul0"> <li><a href="#">Cras gravida iaculis diam, eu volutpat justo gravida et</a></li>
	  <li><a href="#">Duis risus libero, sollicitudin a leo et</a></li>
	  <li><a href="#">Sed augue purus, lobortis vel nulla lacinia</a></li>	                                                                                 
	</ul>

</div>	
<div class="span3">

	<div class="block_title">Find us on:</div>

	<ul class="ul_social">
	  <li><a href="#"><img src="images/social_ic1.jpg" alt="" class="img"><span>Facebook</span></a></li>
	  <li><a href="#"><img src="images/social_ic2.jpg" alt="" class="img"><span>Twitter</span></a></li>
	  <li><a href="#"><img src="images/social_ic3.jpg" alt="" class="img"><span>Linked in</span></a></li>
	  <li><a href="#"><img src="images/social_ic4.jpg" alt="" class="img"><span>Pinterest</span></a></li>
	</ul>

</div>	
<div class="span3">

	<div class="block_title">Information</div>

	<p class="txt">
		<a href="#" class="color2">Lorem ipsum sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</a><br><br>
		Ipsum dolor sit amet conse ctetur adipisicing elit, sed do <a href="#" class="color1">eiusmod</a> tempor incididunt ut labore et dolore magna aliqua
	</p>

</div>	
</div>	
</div>
</div>	
<!-- <div class="bot2">
<div class="container">
<div class="row">
<div class="span12">
	<div class="copyright">Copyright © 2014. All rights reserved.<br />
    do not delete<div class="webdesign">Web Design: <a class="mycode" href="http://www.myfreecsstemplates.com">free web templates</a></div>end</div>
</div>	
</div>	
</div>	
</div> -->
</footer>
	
</div>
<!-- <script type="text/javascript" src="js/bootstrap.js"></script> -->
</body>
</html>